/**
 * 备选日期弹窗
 * @email 626097912@qq.com
 * Created by dength on 2017/04/24
 * -----注意：此处第一个日期为抢票首页传递过来的日期，之后为后三天日期，票日期不能超过30天，如果正好在30天外，默认后三天不可选
 * 传参，回调，都没有做
 */
import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    Modal,
    StyleSheet,
    Platform,
    ScrollView,
    TouchableOpacity,
    Image
} from 'react-native';
import Constants from '../../base/constants';
import CheckBox from 'react-native-check-box';

const data = [{ checked: true }];
const IMAGS = [
    require('../../images/ic_radio.png'),
    require('../../images/ic_unradio.png'),
];

export default class AlternativeDate extends Component {
    constructor(props) {
        super(props);
    }

    onResult() {
        this.props.onHideAlternativeDate();
    }

    onClick(data) {
        data.checked = !data.checked;
    }

    render() {
        let { showAlternativeDate } = this.props;
        return (
            <View>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={showAlternativeDate}
                    onShow={() => { } }
                    onRequestClose={() => { } } >
                    <View style={styles.modalStyle}>
                        <View style={styles.box}>
                            <View style={styles.actionBar}>
                                <View style={styles.actionBar_box}>
                                    <TouchableOpacity
                                        onPress={this.onResult.bind(this)}
                                        activeOpacity={0.8}
                                        >
                                        <Text style={styles.actionBar_box_text}>取消</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        >
                                        <Text style={styles.actionBar_box_text}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={styles.prompt}>
                                <View style={styles.prompt_box}>
                                    <Text style={styles.prompt_box_text}>抢票高峰，多选几个日期，成功率更高。</Text>
                                </View>
                            </View>
                            <View style={styles.Choices}>
                                <View style={styles.Choices_box}>

                                    <View style={[styles.Choices_box_li, styles.Choices_xian]}>
                                        <View style={styles.Choices_box_li_m}>
                                            <View style={{ justifyContent: 'center' }}>
                                                <Text style={styles.Choices_box_text}>
                                                    4月24日 (
                                                    <Text>星期一</Text>
                                                    )
                                            </Text>
                                            </View>
                                            <View style={{ justifyContent: 'center' }}>
                                                <CheckBox
                                                    onClick={() => this.onClick(data)}
                                                    isChecked={data.checked}
                                                    checkedImage={<Image source={IMAGS[0]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    unCheckedImage={<Image source={IMAGS[1]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    />
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[styles.Choices_box_li, styles.Choices_xian]}>
                                        <View style={styles.Choices_box_li_m}>
                                            <View style={{ justifyContent: 'center' }}>
                                                <Text style={styles.Choices_box_text}>
                                                    4月25日 (
                                                    <Text>星期二</Text>
                                                    )
                                            </Text>
                                            </View>
                                            <View style={{ justifyContent: 'center' }}>
                                                <CheckBox
                                                    onClick={() => this.onClick(data)}
                                                    isChecked={data.checked}
                                                    checkedImage={<Image source={IMAGS[0]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    unCheckedImage={<Image source={IMAGS[1]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    />
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[styles.Choices_box_li, styles.Choices_xian]}>
                                        <View style={styles.Choices_box_li_m}>
                                            <View style={{ justifyContent: 'center' }}>
                                                <Text style={styles.Choices_box_text}>
                                                    4月26日 (
                                                    <Text>星期三</Text>
                                                    )
                                            </Text>
                                            </View>
                                            <View style={{ justifyContent: 'center' }}>
                                                <CheckBox
                                                    onClick={() => this.onClick(data)}
                                                    isChecked={data.checked}
                                                    checkedImage={<Image source={IMAGS[0]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    unCheckedImage={<Image source={IMAGS[1]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    />
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[styles.Choices_box_li, styles.Choices_xian]}>
                                        <View style={styles.Choices_box_li_m}>
                                            <View style={{ justifyContent: 'center' }}>
                                                <Text style={styles.Choices_box_text}>
                                                    4月27日 (
                                                    <Text>星期四</Text>
                                                    )
                                            </Text>
                                            </View>
                                            <View style={{ justifyContent: 'center' }}>
                                                <CheckBox
                                                    onClick={() => this.onClick(data)}
                                                    isChecked={data.checked}
                                                    checkedImage={<Image source={IMAGS[0]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    unCheckedImage={<Image source={IMAGS[1]}
                                                        style={{ width: 22, height: 22 }} />}
                                                    />
                                            </View>
                                        </View>
                                    </View>


                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

AlternativeDate.propTypes = {
    showAlternativeDate: PropTypes.bool.isRequired,
    onShowAlternativeDate: PropTypes.func.isRequired,
    onHideAlternativeDate: PropTypes.func.isRequired
};

var styles = StyleSheet.create({
    modalStyle: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
    },
    box: {
        width: Constants.window.width, backgroundColor: 'white', position: 'absolute', bottom: 0, left: 0, height: 240
    },
    actionBar: {
        height: 39, backgroundColor: '#FF8B00', width: Constants.window.width, justifyContent: 'center'
    },
    actionBar_box: {
        marginLeft: 23, marginRight: 23, justifyContent: 'space-between', flexDirection: 'row', width: Constants.window.width - 46
    },
    actionBar_box_text: {
        color: 'white', fontSize: 12
    },
    prompt: {
        backgroundColor: '#FFF7DC', width: Constants.window.width, height: 21, justifyContent: 'center'
    },
    prompt_box: {
        marginLeft: 15
    },
    prompt_box_text: {
        color: '#555555', fontSize: 12
    },
    //选择日期
    Choices: {
        width: Constants.window.width, height: 150
    },
    Choices_box: {
        marginTop: 5, marginLeft: 25, marginRight: 25, marginBottom: 15
    },
    Choices_box_li: {
        height: 37, flexDirection: 'row', width: Constants.window.width - 50,
    },
    Choices_xian: {
        borderBottomWidth: 1, borderBottomColor: '#DCDEDF',
    },
    Choices_box_li_m: {
        width: Constants.window.width - 50 - 28, height: 37,
        marginLeft: 14, marginRight: 14, flexDirection: 'row', justifyContent: 'space-between',
    },
    Choices_box_text: {
        fontSize: 15, color: '#37363A'
    }

});


//解决IOS部分样式不兼容
// iOS Styles
var iosStyles = StyleSheet.create({

})
// Android styles
const androidStyles = StyleSheet.create({

})
const sliderStyles = (Platform.OS === 'ios') ? iosStyles : androidStyles;